<template>
	<view class="organize-container">
		<view class="header">
			<text class="title">组织架构</text>
		</view>
		
		<!-- 加载状态 -->
		<view v-if="loading" class="loading-container">
			<text class="loading">加载中...</text>
		</view>
		
		<!-- 组织架构树形展示 -->
		<view v-if="organizationTree.length > 0" class="tree-container">
			<view v-for="(department, index) in organizationTree" :key="department._id">
				<view class="department-item level-0">
					<view class="department-header" @tap="toggleDepartment(index)">
						<text class="expand-icon">{{ expandedDepartments[index] ? '▼' : '▶' }}</text>
						<text class="department-name">{{ department.name }}</text>
						<text class="department-type">{{types[department.type]}}</text>
					</view>
					
					<!-- 子部门 -->
					<view v-if="expandedDepartments[index]" class="children-container">
						<view class="tree-line level-0"></view>
						<departmentItem
							v-for="(child, childIndex) in department.children"
							:key="child._id"
							:department="child"
							:level="1"
							@toggle="toggleChildDepartment(index, childIndex)"
						></departmentItem>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 无数据提示 -->
		<view v-else class="empty-container">
			<text class="empty-text">暂无组织架构数据</text>
		</view>
	</view>
</template>

<script>
	import departmentItem from './department-item.vue';
	export default {
		data() {
			return {
				loading: false,
				departments: [], // 所有部门数据
				organizationTree: [], // 树形结构数据
				expandedDepartments: [] ,// 展开状态
				types:{
					department:'部门',
					team:'团队',
					employee:'员工'
				}
			}
		},
		components: {
		  departmentItem
		},
		onLoad() {
			this.loadOrganizationData();
		},
		methods: {
			// 加载组织架构数据
			async loadOrganizationData() {
				this.loading = true;
				try {
					// 获取数据库实例
					const db = uniCloud.database();
					// 查询所有部门数据
					const res = await db.collection('mydb-department').get();
					console.log(res)
					if (res.result.code === 0 && res.result) {
						this.departments = res.result.data || [];
						// 构建树形结构
						this.buildOrganizationTree();
						// 初始化展开状态
						this.expandedDepartments = new Array(this.organizationTree.length).fill(false);
					} else {
						uni.showToast({
							title: '获取组织架构失败',
							icon: 'none'
						});
						console.error('获取组织架构失败:', res);
					}
				} catch (error) {
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					});
					console.error('加载组织架构出错:', error);
				} finally {
					this.loading = false;
				}
			},
			
			// 构建组织架构树形结构
			buildOrganizationTree() {
				// 创建id到部门的映射
				const departmentMap = {};
				this.departments.forEach(dept => {
					departmentMap[dept._id] = {
						...dept,
						children: []
					};
				});
				
				// 构建树形结构
				const tree = [];
				this.departments.forEach(dept => {
					if (!dept.parent_id) {
						// 顶级部门
						tree.push(departmentMap[dept._id]);
					} else if (departmentMap[dept.parent_id]) {
						// 子部门
						departmentMap[dept.parent_id].children.push(departmentMap[dept._id]);
					}
				});
				console.log(tree)
				this.organizationTree = tree;
			},
			
			// 切换部门展开状态
			toggleDepartment(index) {
				this.$set(this.expandedDepartments, index, !this.expandedDepartments[index]);
			},
			
			// 切换子部门展开状态
			toggleChildDepartment(parentIndex, childIndex) {
				// 这里可以添加额外的处理逻辑
				console.log('切换子部门:', parentIndex, childIndex);
			}
		}
	}
</script>

<style scoped>
	.organize-container {
		padding: 20rpx;
		background-color: #f8f8f8;
		min-height: 100vh;
	}
	
	.header {
		margin-bottom: 30rpx;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.loading-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 100rpx 0;
	}
	
	.loading {
		font-size: 28rpx;
		color: #999;
	}
	
	.empty-container {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 100rpx 0;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.tree-container {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
	}
	
	.department-item {
		margin-bottom: 10rpx;
	}
	
	.department-header {
		display: flex;
		align-items: center;
		padding: 20rpx;
		background-color: #f5f7fa;
		border-radius: 8rpx;
		transition: background-color 0.3s;
	}
	
	.department-header:active {
		background-color: #e6e8eb;
	}
	
	.expand-icon {
		width: 40rpx;
		font-size: 24rpx;
		color: #999;
		text-align: center;
	}
	
	.department-name {
		flex: 1;
		font-size: 30rpx;
		color: #333;
		margin-left: 20rpx;
	}
	
	.department-type {
		font-size: 24rpx;
		color: #666;
		background-color: #e8e8e8;
		padding: 4rpx 20rpx;
		border-radius: 16rpx;
	}
	
	.children-container {
		position: relative;
		margin-left: 40rpx;
		margin-top: 10rpx;
		padding-left: 30rpx;
	}
	
	.tree-line {
		position: absolute;
		left: 20rpx;
		top: 0;
		bottom: 0;
		width: 2rpx;
		background-color: #e8e8e8;
	}
	
	/* 不同层级的样式 */
	.level-0 .department-name {
		font-weight: bold;
	}
	
	.level-1 .department-header {
		background-color: #f0f2f5;
	}
	
	.level-2 .department-header {
		background-color: #fafafa;
	}
	
	.level-3 .department-header {
		background-color: #ffffff;
		border: 1px solid #f0f0f0;
	}
</style>
